<template>
    <view class="container">
        <view class="heade">
            <status-bar></status-bar>
            <view class="top">
                <localNav>
                    <view class="title">诚訫租</view>
                </localNav>

                <view class="banner_container">
                    <swiper
                        class="swiper"
                        circular
                        :indicator-dots="true"
                        :autoplay="true"
                        :interval="2000"
                        :duration="500">
                        <swiper-item class="swiper_item" v-for="i in bannerList" :key="i.FId">
                            <image :src="i.FBannerImg" mode="aspectFill" />
                        </swiper-item>
                    </swiper>
                </view>
            </view>
            <view class="content">
                <view class="h1">诚訫租</view>
                <view class="span">免押租金，一站式服务平台，尽在诚訫租</view>
                <view class="span">轻松简单容易就租！</view>
            </view>
        </view>
        <!-- {{ stationQueryStr }} -->
        <view class="op_icons">
            <!-- #ifdef H5 -->
            <view class="icon_item" @click="toStoreProList">
                <view class="icon">
                    <text class="icon-store-stroke fs40 fw-bold"></text>
                </view>
                <text class="icon_name">去租房</text>
            </view>
            <!-- #endif -->
            <!-- #ifndef H5 -->
            <view class="icon_item" @click="scanToStoreProList">
                <view class="icon">
                    <text class="icon-scan fs40 fw-bold"></text>
                </view>
                <text class="icon_name">扫租赁码</text>
            </view>
            <!-- #endif -->
            <!-- <view class="icon_item" @click="testPay">
                <view class="icon">
                    <text class="icon-scan fs40 fw-bold"></text>
                </view>
                <text class="icon_name">测试支付</text>
            </view> -->
            <view class="icon_item" @click="toOrder">
                <view class="icon">
                    <text class="icon-wenzhang1 fs50"></text>
                </view>
                <text class="icon_name color-red">我的订单</text>
            </view>
        </view>
        <!-- <input type="text" placeholder="输入单号支付" style="width: 100%;height: 100rpx;" v-model="testTradeNo">
        -----------------------
        <textarea style="width: 100%;height: 400px;" maxlength="-1" placeholder="输入testOrderStr" v-model="testOrderStr"></textarea> -->
        <view v-if="concatPhone" class="call_phone"> 客服电话：{{ concatPhone }} </view>
        <!-- #ifdef H5 -->
        <view class="beian">
           <a href="https://beian.miit.gov.cn/">闽ICP备2021015424号-1</a>
        </view>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <view v-if="isDev" class="store_address"> 门店地址：厦门市湖里区枋湖南路169-128号501室(法律文书送达地址)</view>
        <!-- #endif -->
    </view>
</template>

<script setup lang="ts">
import statusBar from "@/components/base/statusBar.vue";
import localNav from "@/components/base/localNav.vue";
import { ref } from "vue";
import dayjs from "dayjs";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { globalLogin, getUserInfoFn, getLoginStatus } from '@/hooks/login';
import { getBannerList } from '@/api/base';
import { getNearStoreByDistance } from '@/api/shop';
import { useStore } from "vuex";
import interact from "@/utils/interact";
const Store = useStore()
const isDev = ref(process.env.NODE_ENV == 'development')


const stationQueryStr = ref('')
onLoad((options: any) => {
    if(options.linkSysUserId) {
        // #ifdef H5
        stationQueryStr.value = location.search
        if(location.search) {
            uni.setStorageSync('stationQueryStr', location.search)
        }
        // #endif
    } else {
        let _stationQueryStr = uni.getStorageSync('stationQueryStr')
        if(_stationQueryStr) stationQueryStr.value = _stationQueryStr
    }
    console.log("onLoad ........", dayjs().format("YYYY-MM-DD HH:mm:ss"));
    getBanner()
    getStoreInfo()
});

onShow(() => {
    Store.commit('shop/SET_TEMP_STORE_NO', '');
});

const bannerList = ref<any[]>([]);
const getBanner = () => {
    getBannerList({
        type: '00',
        token: ''
    }).then(res => {
        bannerList.value = res.data
        console.log(res);
    })
}

const concatPhone = ref('')
const getStoreInfo = () => {
    getNearStoreByDistance({
        lat: '0',
        lon: '0',
        storeNo: Store.state.shop.storeNo,
        token: ''
    }).then(res => {
        if(res.data && res.data.list.length) {
            let headStoreInfo = res.data.list[0]
            concatPhone.value = headStoreInfo.concatPhone
            // uni.setStorageSync('concatPhone', headStoreInfo.concatPhone)
            Store.commit('shop/SET_SHOP_INFO', headStoreInfo);
        }
    })


}

const toOrder = () => {
    getLoginStatus(true).then(status => {
        if(status) {
            uni.navigateTo({
                url: "/pages/order/list",
            });
        }
    })
}


const toStoreProList = () => {
    if(!stationQueryStr.value) return interact.toast('请重新扫租赁码')
    uni.navigateTo({
        url: "/pages/product/list?" + stationQueryStr.value,
    });
}




const scanToStoreProList = () => {
    if(process.env.NODE_ENV == 'development') {
        uni.navigateTo({
            // url: "/pages/product/list?" + 'storeNo=D00000426&linkSysUserId=749632667917484032', //厦门 紫椴东坪站
            // url: "/pages/product/list?" + 'storeNo=D00000428&linkSysUserId=756596127108694016',
            // url: "/pages/product/list?" + 'storeNo=D00000426&linkSysUserId=749632770745040896',
            // url: "/pages/product/list?" + 'storeNo=D00000426&linkSysUserId=760472960136904704',
            // url: "/pages/product/list?" + 'storeNo=D00000429&linkSysUserId=761238139925692416',
            // url: "/pages/product/list?" + 'storeNo=D00000426&linkSysUserId=764523579453734912',
            // url: "/pages/product/list?" + 'storeNo=D00000426&linkSysUserId=766699478307569664',
            url: "/pages/product/list?" + 'storeNo=D00000426&linkSysUserId=781886502882770944',
        });
        return
    }
    // #ifdef H5
    return toStoreProList()
    // #endif

    uni.scanCode({
        scanType: ['qrCode'],
        success: (res: UniApp.ScanCodeSuccessRes) => {
            if(res.result.indexOf('linkSysUserId') == -1) return interact.toast('无效门店码')
            console.log(res);
            uni.navigateTo({
                url: "/pages/product/list?" + res.result,
            });
        }
    })
}


const testTradeNo = ref('')
const testOrderStr = ref('')

const testPay = () => {
    let payOrder: any = {}
    if(testTradeNo.value) {
        payOrder.tradeNO = testTradeNo.value
    }
    if(testOrderStr.value) {
        payOrder.orderStr = testOrderStr.value
    }
    console.log(payOrder);

    my.tradePay({
        ...payOrder,
        // tradeNO: "2025041722001442081456552256",
        // orderStr: testOrderStr,
        // tradeNO: testTradeNo,
        success: (res: any) => {
            console.log('success', res);
        },
        fail: (err: any) => {
            console.log('fail', err);
        },
    })
}
</script>

<style lang="scss" scoped>
.container {
    .heade {
        width: 100%;
        @include gradient(#dda62f, #f4f4f4, to bottom, 0%, 85%);
        .top {
            width: 100%;
            height: 550rpx;
            .banner_container{
                margin: 30rpx auto;
            }
            .banner_container,
            .swiper,
            .swiper_item{
                width: 650rpx;
                height: 350rpx;
                border-radius: 10rpx;
                overflow: hidden;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .title {
        color: #fff;
        height: 86rpx;
        line-height: 86rpx;
        font-size: 40rpx;
        font-weight: bold;
    }
    .content {
        padding: 0 60rpx 100rpx;
        .h1 {
            font-size: 46rpx;
            margin-bottom: 40rpx;
        }
        .span {
            font-size: 28rpx;
            color: #666;
            line-height: 50rpx;
        }
    }
}

.op_icons {
    display: flex;
    justify-content: space-around;
    padding: 0 40rpx;
    .icon_item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .icon {
            width: 120rpx;
            height: 120rpx;
            margin-bottom: 20rpx;
            border-radius: 50%;
            background-color: #d1921c;
            @include align(center);
            text {
                color: #fff;
            }
        }
        .icon_name {
            font-size: 28rpx;
            color: #333;
        }
    }
}
.call_phone {
    text-align: center;
    font-size: 40rpx;
    font-weight: bold;
    color: #d1921c;
    margin-top: 100rpx;
}
.store_address {
    text-align: center;
    font-size: 28rpx;
    color: #d1921c;
    margin-top: 30rpx;
    padding: 0 30rpx;
}
.beian{
    position: fixed;
    width: 100%;
    text-align: center;
    bottom: 60px;
    z-index: 999;
    a{
        color: #999;
        font-size: 20rpx;
    }
}
</style>
